<div class="accordion-group ">
    <input type="hidden">
    <div class="row row-hover accordion-heading recommend-relationType" style="margin-left: 0">
        <div class="span3 relationTypeTitle" style="min-width: 350px;width: 0px">
            <label class="control-label-small">relation</label>
            <p class="controls-text-small">bird[1] <>—— wing[2]</p>
        </div>
        <div class="span1-compact relationTypeEdit" style="padding-top: 8px;display: none">
            <span class="add-on remove-input" style="margin-left: 0px" ><i class="icon-edit" title="Revise"></i></span>
            <span class="add-on remove-input" style="margin-left: 0px" ><i class="icon-trash" title="Delete"></i></span>
        </div>
    </div>
    <div class="accordion-body" style="display: none;overflow: visible">
        <div class="accordion-inner " style="padding: 0px 0px 0px 0px;">
            <div class="control-group form-horizontal" style="margin: 0 0 0 0;">
                <table class="table table-relation">
                    <tbody class="basic">
                    <tr>
                        <td>type</td>
                        <td colspan="2">
                            <div class="show" style="width: 215px">
                                <p style="display: inline"></p>
                                <div class="pull-right span-hidden" style="display: none;">
                                    <!--span class="remove-input" ><i class="icon-edit" title="修改"></i></span>
                                    <span class="remove-input" ><i class="icon-trash" title="删除"></i></span-->
                                </div>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <div class="btn-group">
                                    <button class="btn dropdown-toggle" style="min-width:125px;padding-top:0px;padding-bottom:0px;" data-toggle="dropdown">Choose Type<span class="caret"></span></button>
                                    <ul class="dropdown-menu" style="min-width: 104px" >
                                        <li name="generalization" ><a href="javascript:;">generalization</a></li>
                                        <li name="composition" ><a href="javascript:;">composition</a></li>
                                        <li name="aggregation" ><a href="javascript:;">aggregation</a></li>
                                        <li name="association" ><a href="javascript:;">association</a></li>
                                    </ul>
                                </div>
                                <p style="display: inline;" >  Name:</p>
                                <input type="text" class="search-relationTypeName" value="" style="height:18px;padding-top:0px;padding-bottom:0px;background-color: #f7f7f7;width: 150px;display: inline"  data-provide="typeahead" data-items="10" autocomplete="off">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>role</td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <input type="text" class="miniInput search-role1" data-provide="typeahead" data-items="10" autocomplete="off">
                            </div>
                        </td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <input type="text" class="miniInput search-role2"  data-provide="typeahead" data-items="10" autocomplete="off">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>class</td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                                <div class="pull-right span-hidden" style="display: none;">
                                    <span class="remove-input" ><i class=" icon-resize-horizontal" title="交换"></i></span>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                                <div class="pull-right span-hidden" style="display: none;">
                                    <span class="remove-input" ><i class=" icon-resize-horizontal" title="交换"></i></span>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>multiplicity</td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <input type="text" class="miniInput search-multiplicity1" data-provide="typeahead" data-items="10" autocomplete="off">
                            </div>
                        </td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <input type="text" class="miniInput search-multiplicity2"  data-provide="typeahead" data-items="10" autocomplete="off">
                            </div>
                        </td>
                    </tr>
                    </tbody>
                    <tbody class="additional">
                    <tr style="display:none;">
                        <td>ordering</td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <label class="radio inline"><input type="radio" value="True" >True</label>
                                <label class="radio inline"><input type="radio" value="False">False</label>
                            </div>
                        </td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <label class="radio inline"><input type="radio" value="True" >True</label>
                                <label class="radio inline"><input type="radio" value="False">False</label>
                                <span class="remove-input pull-right"><i class="icon-minus" title="删除元素"></i></span>
                            </div>
                        </td>
                    </tr>
                    <tr style="display:none;">
                        <td>uniqueness</td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <label class="radio inline"><input type="radio" value="True" >True</label>
                                <label class="radio inline"><input type="radio" value="False">False</label>
                            </div>
                        </td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <label class="radio inline"><input type="radio" value="True" >True</label>
                                <label class="radio inline"><input type="radio" value="False">False</label>
                                <span class="remove-input pull-right" ><i class="icon-minus" title="删除元素"></i></span>
                            </div>
                        </td>
                    </tr>
                    <tr style="display:none;">
                        <td>readOnly</td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <label class="radio inline"><input type="radio" value="True" >True</label>
                                <label class="radio inline"><input type="radio" value="False">False</label>
                            </div>
                        </td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <label class="radio inline"><input type="radio" value="True" >True</label>
                                <label class="radio inline"><input type="radio" value="False">False</label>
                                <span class="remove-input pull-right" ><i class="icon-minus" title="remove element"></i></span>
                            </div>
                        </td>
                    </tr>
                    <tr style="display:none;">
                        <td>union</td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <label class="radio inline"><input type="radio" value="True" >True</label>
                                <label class="radio inline"><input type="radio" value="False">False</label>
                            </div>
                        </td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <label class="radio inline"><input type="radio" value="True" >True</label>
                                <label class="radio inline"><input type="radio" value="False">False</label>
                                <span class="remove-input pull-right" ><i class="icon-minus" title="remove element"></i></span>
                            </div>
                        </td>
                    </tr>
                    <tr style="display:none;">
                        <td>subsets</td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <input type="text" class="miniInput search-subsets1" data-provide="typeahead" data-items="10" autocomplete="off">
                            </div>
                        </td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <input type="text" class="miniInput search-subsets2"  data-provide="typeahead" data-items="10" autocomplete="off">
                                <span class="remove-input pull-right" ><i class="icon-minus" title="remove element"></i></span>
                            </div>
                        </td>
                    </tr>
                    <tr style="display:none;">
                        <td>redefines</td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <input type="text" class="miniInput search-redefines1" data-provide="typeahead" data-items="10" autocomplete="off">
                            </div>
                        </td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <input type="text" class="miniInput search-redefines2"  data-provide="typeahead" data-items="10" autocomplete="off">
                                <span class="remove-input pull-right" ><i class="icon-minus" title="remove element"></i></span>
                            </div>
                        </td>
                    </tr>
                    <tr style="display:none;">
                        <td>composite</td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <label class="radio inline"><input type="radio" value="True" >True</label>
                                <label class="radio inline"><input type="radio" value="False">False</label>
                            </div>
                        </td>
                        <td>
                            <div class="show">
                                <p style="display: inline"></p>
                            </div>
                            <div class="control-sub" style="display:none;">
                                <label class="radio inline"><input type="radio" value="True" >True</label>
                                <label class="radio inline"><input type="radio" value="False">False</label>
                                <span class="remove-input pull-right" ><i class="icon-minus" title="Delete"></i></span>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class='text-center additional' style="margin-top: -15px;margin-bottom: 5px"><span class="remove-input " ><i class="icon-plus-sign" title="Additional"></i></span></div>
            </div>
        </div>
    </div>
    <div class="optional">
        <!--some recommend things-->
    </div>
</div>


<script type="text/javascript">
    $(function(){
        $(".search-relationTypeName").typeahead({
            source:function(query, process){
                setTypeTypeAheadState($("#modal-create-relationType").children(".modal-body").children(".accordion-group"));
                process(getTypeaHead('relationType-name'));
            }
        });
        $(".search-role1").typeahead({
            source:function(query, process){
                setTypeTypeAheadState($("#modal-create-relationType").children(".modal-body").children(".accordion-group"));
                process(getTypeaHead('relationType-role1'));
            }
        });
        $(".search-role2").typeahead({
            source:function(query, process){
                setTypeTypeAheadState($("#modal-create-relationType").children(".modal-body").children(".accordion-group"));
                process(getTypeaHead('relationType-role2'));
            }
        });
        $(".search-multiplicity1").typeahead({
            source:function(query, process){
                setTypeTypeAheadState($("#modal-create-relationType").children(".modal-body").children(".accordion-group"));
                process(getTypeaHead('relationType-multiplicity1'));
            }
        });
        $(".search-multiplicity2").typeahead({
            source:function(query, process){
                setTypeTypeAheadState($("#modal-create-relationType").children(".modal-body").children(".accordion-group"));
                process(getTypeaHead('relationType-multiplicity2'));
            }
        });
        $(".search-subsets1").typeahead({
            source:function(query, process){
                setTypeTypeAheadState($("#modal-create-relationType").children(".modal-body").children(".accordion-group"));
                process(getTypeaHead('relationType-subsets1'));
            }
        });
        $(".search-subsets2").typeahead({
            source:function(query, process){
                setTypeTypeAheadState($("#modal-create-relationType").children(".modal-body").children(".accordion-group"));
                process(getTypeaHead('relationType-subsets2'));
            }
        });
        $(".search-redefines1").typeahead({
            source:function(query, process){
                setTypeTypeAheadState($("#modal-create-relationType").children(".modal-body").children(".accordion-group"));
                process(getTypeaHead('relationType-redefines1'));
            }
        });
        $(".search-redefines2").typeahead({
            source:function(query, process){
                setTypeTypeAheadState($("#modal-create-relationType").children(".modal-body").children(".accordion-group"));
                process(getTypeaHead('relationType-redefines2'));
            }
        });
    });
</script>